<template>
    <main>
        <input 
            :value="value"
            :class="className"
            v-bind="$attrs"
            :style="myStyle"
            v-on="inputEventListener"
        />
    </main>
</template>

<script>
export default {
    name: 'Input',
    props:['myStyle','value'],
    inheritAttrs: false,
    model:{
        prop: 'value',
        event: 'input'
    },
    data(){
        return {
            className:{
                'input': true,
                'default': true
            }
        }
    },
    methods:{
        handleInput(e){
            const value = e.target.value
            this.$emit('update:title',value)
            this.$emit('input',value)
        }
    },
    computed:{
        inputEventListener:function(){
            const vm = this
            return Object.assign({},
                this.$listeners,
                {
                    input: vm.handleInput
                }
            )
        }
    }
}
</script>

<style lang="less">
    .input {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding-left: 16px;
        outline: none;
        border: 1px solid rgb(8, 54, 160);
        border-radius: 4px;
    }
    .default {
        height: 36px;
    }
    .input:focus{
        border-color: rgb(124, 112, 226);
        border-width: 2px;
    }

    .input::placeholder {
        font-size: 14px;
        color: #ccc;
    }
</style>